<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01固定定位小技巧1</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.5);
            position:fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        /*悬停时,让遮罩层消失*/
        .mask:hover {
            display: none;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ducimus eligendi et laborum molestias nisi
        non officia praesentium quas quidem quisquam reprehenderit sapiente sequi, tempora voluptatum. Dolorum illum
        porro quasi!
    </div>
    <div>Aperiam id obcaecati quasi recusandae. Exercitationem facere fugit iure pariatur placeat sit temporibus ullam
        unde. Aut beatae distinctio dolor ducimus enim exercitationem fugit ipsum itaque magnam quaerat, quibusdam
        tempora vel.
    </div>
    <div>Et impedit ipsum nisi numquam rem repellat reprehenderit! Animi asperiores beatae cum debitis dolores ea eius,
        eos explicabo illo natus nobis officia porro, quae quas quis, rem similique sit voluptates.
    </div>
    <div>Accusantium animi aut culpa, cum cumque deserunt dolores doloribus illum ipsum labore laboriosam laborum nam
        nulla quas quasi quia quis quo ratione saepe sed similique sint soluta tempore unde voluptatibus!
    </div>
    <div>Atque esse id iure modi veritatis. Adipisci aspernatur blanditiis cumque cupiditate dicta, eaque facere hic
        iusto odio quibusdam quidem sed sunt tenetur, unde voluptatum. Earum enim est perferendis quam voluptas.
    </div>
    <div>Commodi debitis enim esse in incidunt iste libero pariatur sint. Asperiores atque aut consequuntur doloribus
        ea, earum eos explicabo in itaque maxime molestiae, molestias neque sequi soluta, velit veritatis voluptatem?
    </div>
    <div>Accusamus, adipisci atque corporis cupiditate debitis delectus dolorem doloremque earum, eius eos et ex
        expedita iure maxime minima molestiae necessitatibus non officia placeat porro praesentium quos similique
        temporibus unde vitae.
    </div>
    <div>Accusamus aspernatur consequatur consequuntur cum deserunt dolore ea earum eos esse ex excepturi exercitationem
        facere incidunt laboriosam maxime minus, modi qui sint tempora vitae! Accusamus fugiat id inventore placeat
        similique.
    </div>
    <div>Animi aspernatur commodi consequatur, corporis distinctio dolor dolorem error excepturi explicabo facilis hic
        inventore iusto labore minus necessitatibus nesciunt numquam omnis perferendis quia saepe sed sint suscipit ut
        velit voluptatibus?
    </div>
    <div>Aliquam aspernatur autem commodi consequuntur deserunt esse fugit iure maxime necessitatibus nobis omnis porro
        provident quam, quo tempore veniam veritatis voluptates voluptatibus! Debitis, dolorem id inventore quisquam
        sequi velit voluptate!
    </div>
    <div>Cumque delectus dicta eaque excepturi porro sint ut? Architecto consectetur doloremque, eius enim eos fugit
        harum, in itaque nostrum nulla odio officia perspiciatis repellendus, sit sunt tenetur ullam unde velit.
    </div>
    <div>Architecto beatae deserunt error illo itaque, reiciendis repudiandae tempore unde voluptates! Ad adipisci
        aliquid aperiam at autem dolor doloremque eaque eveniet, id ipsa iure magni modi nisi, obcaecati quibusdam
        similique.
    </div>
    <div>Alias amet autem cum dolorem eos exercitationem fugit harum illum maxime minus nam non optio, placeat tempore
        ullam unde, velit! Ad commodi consequuntur dolores neque odio omnis, pariatur repudiandae ullam.
    </div>
    <div>Accusantium at, autem, deleniti deserunt ea error excepturi hic id illum molestiae, neque quasi quisquam. Ab
        accusamus assumenda at eveniet illo, labore minus obcaecati, pariatur praesentium quis, reiciendis soluta
        suscipit.
    </div>
    <div>Ab aliquam autem, beatae cupiditate, debitis deserunt est facilis ipsum iste labore, maiores minima obcaecati
        pariatur porro sapiente tenetur unde vel veritatis voluptates voluptatum. Doloremque dolores iure neque quam
        unde?
    </div>
    <div>Alias consectetur deleniti ipsa officia repudiandae sequi. Eligendi mollitia quasi quod? Alias architecto cum
        dolores doloribus ea exercitationem hic incidunt iusto minima neque non ratione repellendus sequi, sint vero
        voluptates.
    </div>
    <div>Adipisci animi atque dignissimos earum eligendi et facere facilis fuga impedit incidunt nisi perferendis rerum,
        totam unde ut! Ab animi cum doloribus ea eligendi error est nulla quibusdam tempora voluptatem!
    </div>
    <div>Doloremque ipsum magnam nesciunt rem voluptatibus. Ad aspernatur atque consectetur consequatur dolor error
        excepturi, exercitationem in molestiae mollitia nesciunt nisi nobis officia pariatur quae, quis saepe, sed
        temporibus voluptatem voluptates!
    </div>
    <div>Ad animi aspernatur consectetur cumque delectus distinctio eligendi est expedita facilis impedit, ipsam magnam
        maiores, maxime, nobis officia possimus quidem repudiandae similique ut voluptatibus! Dolores eius eos maxime
        minus repellat!
    </div>
    <div>Aliquam asperiores dolor doloremque dolores doloribus eos facilis in libero maiores maxime necessitatibus nemo
        numquam, officia, quidem rem reprehenderit sit suscipit ullam ut velit. Assumenda excepturi modi nobis quaerat
        quam!
    </div>
    <div>Aliquam amet assumenda, debitis delectus dignissimos distinctio eos error ex harum hic incidunt ipsa labore
        minima quam reiciendis rem repellendus veniam. Aliquid cumque earum itaque libero nam odit repellendus, saepe.
    </div>
    <div>Beatae ducimus eum, facere fugit iusto minus modi quas quo. Accusamus animi asperiores, cum dignissimos ea ipsa
        perferendis qui reiciendis repudiandae similique? Esse exercitationem incidunt minus quidem quo reiciendis
        similique.
    </div>
    <div>Accusantium enim ipsa nulla quia quis quos repellat similique temporibus vitae voluptates. Asperiores delectus
        ex laboriosam necessitatibus sint. Consequuntur eligendi excepturi ipsa ipsam minus mollitia possimus qui quia
        unde voluptates.
    </div>
    <div>A accusamus aliquam animi consequuntur debitis delectus dolorem eligendi est illum inventore itaque maiores,
        nesciunt nobis nostrum pariatur praesentium provident repudiandae tempore voluptate voluptatem? Ad distinctio
        eligendi magni natus voluptates!
    </div>
    <div>Aperiam aspernatur assumenda beatae blanditiis consectetur enim excepturi, hic itaque iure libero molestias nam
        nesciunt nobis nostrum odit perferendis possimus, quaerat quibusdam quod quos recusandae saepe tempora unde ut
        vel.
    </div>
    <div>Ab ad, asperiores aspernatur cumque cupiditate explicabo hic illo in iure maxime modi necessitatibus neque
        nobis non nulla numquam odio omnis pariatur placeat quidem quisquam reprehenderit sint sit temporibus unde.
    </div>
    <div>Aspernatur assumenda beatae culpa eius eos et, eveniet excepturi expedita facilis id illum incidunt iure labore
        magnam minus modi non omnis quae, quas reiciendis similique soluta voluptatem voluptatibus. Illo, non.
    </div>
    <div>Aut earum explicabo, harum illo ipsa magni maxime, natus nesciunt omnis qui sit totam! Ab cupiditate deleniti
        ex exercitationem, illum nam nisi odit officia placeat praesentium provident reprehenderit sint. Sed.
    </div>
    <div>Accusamus aliquam architecto, at eos eveniet fugiat incidunt magni nemo quasi, ratione rem rerum sit sunt
        tenetur unde voluptate voluptatibus. Deleniti harum impedit laudantium numquam ratione similique sunt voluptatem
        voluptates!
    </div>
    <div>Accusantium ad adipisci, autem blanditiis dignissimos dolorem eos error exercitationem, fugiat, incidunt iusto
        maiores molestiae neque nesciunt perferendis possimus provident quae quam quis unde. Aliquam distinctio quidem
        repellat sequi ullam.
    </div>
</body>
</html>